<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>浮动讲解</title>
    <link rel="stylesheet" href="css/common.css" />
    <style>
      img {
        float: right;
      }
      
      .container {
        background-color: aqua;
        /* overflow: auto; */
      }


      .header {
        background-color: lightpink;
      }

      .footer {
          background-color: gray;
          text-align: center;
          padding: 2px;

          /* 需要清除浮动 */
          clear: both;
      }

      .clear {
        clear: both;
      }


    </style>
  </head>
  <body>
    <!-- <div class="header">
        <h1>浮动</h1>
    </div> -->
    <div class="container">
      <!-- 1. 基本的图文环绕功能-->
      <!-- <div>
        <img src="img/hashiqi.jpg" alt="" class="debug debug-green" />
        <p class="debug">
          Lorem ipsum, dolor sit amet consectetur adipisicing elit. Officia,
          corrupti. Dolorum reiciendis amet dolore repellat! Iusto delectus,
          nobis nihil ducimus repellendus enim, incidunt autem nulla ab commodi
          eos. Perspiciatis, laboriosam.
        </p>

        <p class="debug">
          Lorem ipsum dolor sit amet consectetur, adipisicing elit. Tempora,
          suscipit. Expedita fuga molestiae quasi, asperiores animi assumenda
          perspiciatis aut delectus quam officia adipisci explicabo aperiam.
          Aspernatur dignissimos pariatur tempora eveniet.
        </p>
      </div> -->

      <!-- 2. 覆盖block元素问题 -->
      <div class="header">我是模拟header</div>
      <div class="debug">
        <p class="debug debug-red">主体段落</p>
        <img src="img/hashiqi.jpg" alt="" class="debug debug-green" />
        <img src="img/hashiqi.jpg" alt="" class="debug debug-green" />
      </div>
      <div class="footer">我是模拟footer</div>


      <!-- 3. 高度塌陷问题 -->
      <!-- <div class="debug">
        <p class="debug debug-red">段落1</p>
        <img src="img/hashiqi.jpg" alt="" class="debug debug-green" />
        <img src="img/hashiqi.jpg" alt="" class="debug debug-green" />
        <p class="debug debug-red">段落2</p>
      </div> -->

      <!-- 4. 使用浮动来解决高度塌陷问题-->
      <!-- <div class="debug">
        <p class="debug debug-red">清除浮动</p>
        <img src="img/hashiqi.jpg" alt="" class="debug debug-green" />
        <img src="img/hashiqi.jpg" alt="" class="debug debug-green" />
        <p class="debug debug-red  clear">段落2</p>
      </div> -->
    </div>

    <!-- <footer></footer> -->
  </body>
</html>
